<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<HTML>
 <HEAD>
  <TITLE> 注册 </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>body {
    padding:0;
    margin:0;
    overflow:hidden;
    height: 600px;
      background-color: #656565;
}
canvas {
    padding:0;
    margin:0;
}
div.btnbg {
    position:fixed;
    left:0;
    top:0;
}</style>

<style>
html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}
body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
}
#Register{
    position: absolute;
    top: 50%;
    left:50%;
    margin: -270px 0 0 -150px;
    width: 300px;
    height: 300px;
}
#Register h1{
    color: #fff;
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
h1{
    font-size: 2em;
    margin: 0.67em 0;
}
input{
    width: 300px;
    height: 40px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow:1px 1px 1px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color: #2D2D3F;
}
.but{
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}

a{
  position: absolute;
  top:400px;
  left: 100px;
}


</style>

 </HEAD>

 <BODY>
 

    <div id="Register">
      <div id="goBack"><a th:href="@{/toLoginPage}" >回到登录页面</a></div>
        <h1>Register</h1>

        <form th:action="@{/register}">
            <input type="text" required="required" name="username" value="" autocomplete="off" placeholder="Username">
            <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
            <input type="password" required="required" name="psd" value="" autocomplete="off" placeholder="Password">
            <input type="password" required="required" name="qpsd" value="" autocomplete="off" placeholder="Confirm password">
            <input type="text" required="required" name="phone" value="" autocomplete="off" placeholder="Mobile Phone">
            <input id="nextBtn1" required="required" type="submit" value="register">
        </form>


        <br><br><br><br><br><br><br><br><br><br><br><br>

    </div>
   
<!--<canvas id="sakura"></canvas>-->
<!--<div class="btnbg">-->
<!--</div>-->

<!--&lt;!&ndash; sakura shader &ndash;&gt;-->
<!--<script id="sakura_point_vsh" type="x-shader/x_vertex">-->
<!--uniform mat4 uProjection;-->
<!--uniform mat4 uModelview;-->
<!--uniform vec3 uResolution;-->
<!--uniform vec3 uOffset;-->
<!--uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius-->
<!--uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start-->

<!--attribute vec3 aPosition;-->
<!--attribute vec3 aEuler;-->
<!--attribute vec2 aMisc; //x:size, y:fade-->

<!--varying vec3 pposition;-->
<!--varying float psize;-->
<!--varying float palpha;-->
<!--varying float pdist;-->

<!--//varying mat3 rotMat;-->
<!--varying vec3 normX;-->
<!--varying vec3 normY;-->
<!--varying vec3 normZ;-->
<!--varying vec3 normal;-->

<!--varying float diffuse;-->
<!--varying float specular;-->
<!--varying float rstop;-->
<!--varying float distancefade;-->

<!--void main(void) {-->
<!--    // Projection is based on vertical angle-->
<!--    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);-->
<!--    gl_Position = uProjection * pos;-->
<!--    gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;-->
<!--    -->
<!--    pposition = pos.xyz;-->
<!--    psize = aMisc.x;-->
<!--    pdist = length(pos.xyz);-->
<!--    palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);-->
<!--    -->
<!--    vec3 elrsn = sin(aEuler);-->
<!--    vec3 elrcs = cos(aEuler);-->
<!--    mat3 rotx = mat3(-->
<!--        1.0, 0.0, 0.0,-->
<!--        0.0, elrcs.x, elrsn.x,-->
<!--        0.0, -elrsn.x, elrcs.x-->
<!--    );-->
<!--    mat3 roty = mat3(-->
<!--        elrcs.y, 0.0, -elrsn.y,-->
<!--        0.0, 1.0, 0.0,-->
<!--        elrsn.y, 0.0, elrcs.y-->
<!--    );-->
<!--    mat3 rotz = mat3(-->
<!--        elrcs.z, elrsn.z, 0.0, -->
<!--        -elrsn.z, elrcs.z, 0.0,-->
<!--        0.0, 0.0, 1.0-->
<!--    );-->
<!--    mat3 rotmat = rotx * roty * rotz;-->
<!--    normal = rotmat[2];-->
<!--    -->
<!--    mat3 trrotm = mat3(-->
<!--        rotmat[0][0], rotmat[1][0], rotmat[2][0],-->
<!--        rotmat[0][1], rotmat[1][1], rotmat[2][1],-->
<!--        rotmat[0][2], rotmat[1][2], rotmat[2][2]-->
<!--    );-->
<!--    normX = trrotm[0];-->
<!--    normY = trrotm[1];-->
<!--    normZ = trrotm[2];-->
<!--    -->
<!--    const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);-->
<!--    -->
<!--    float tmpdfs = dot(lit, normal);-->
<!--    if(tmpdfs < 0.0) {-->
<!--        normal = -normal;-->
<!--        tmpdfs = dot(lit, normal);-->
<!--    }-->
<!--    diffuse = 0.4 + tmpdfs;-->
<!--    -->
<!--    vec3 eyev = normalize(-pos.xyz);-->
<!--    if(dot(eyev, normal) > 0.0) {-->
<!--        vec3 hv = normalize(eyev + lit);-->
<!--        specular = pow(max(dot(hv, normal), 0.0), 20.0);-->
<!--    }-->
<!--    else {-->
<!--        specular = 0.0;-->
<!--    }-->
<!--    -->
<!--    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);-->
<!--    rstop = pow(rstop, 0.5);-->
<!--    //-0.69315 = ln(0.5)-->
<!--    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));-->
<!--}-->
<!--</script>-->
<!--<script id="sakura_point_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->

<!--uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius-->
<!--uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start-->

<!--const vec3 fadeCol = vec3(0.08, 0.03, 0.06);-->

<!--varying vec3 pposition;-->
<!--varying float psize;-->
<!--varying float palpha;-->
<!--varying float pdist;-->

<!--//varying mat3 rotMat;-->
<!--varying vec3 normX;-->
<!--varying vec3 normY;-->
<!--varying vec3 normZ;-->
<!--varying vec3 normal;-->

<!--varying float diffuse;-->
<!--varying float specular;-->
<!--varying float rstop;-->
<!--varying float distancefade;-->

<!--float ellipse(vec2 p, vec2 o, vec2 r) {-->
<!--    vec2 lp = (p - o) / r;-->
<!--    return length(lp) - 1.0;-->
<!--}-->

<!--void main(void) {-->
<!--    vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;-->
<!--    vec3 d = vec3(0.0, 0.0, -1.0);-->
<!--    float nd = normZ.z; //dot(-normZ, d);-->
<!--    if(abs(nd) < 0.0001) discard;-->
<!--    -->
<!--    float np = dot(normZ, p);-->
<!--    vec3 tp = p + d * np / nd;-->
<!--    vec2 coord = vec2(dot(normX, tp), dot(normY, tp));-->
<!--    -->
<!--    //angle = 15 degree-->
<!--    const float flwrsn = 0.258819045102521;-->
<!--    const float flwrcs = 0.965925826289068;-->
<!--    mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);-->
<!--    vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;-->
<!--    -->
<!--    float r;-->
<!--    if(flwrp.x < 0.0) {-->
<!--        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);-->
<!--    }-->
<!--    else {-->
<!--        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);-->
<!--    }-->
<!--    -->
<!--    if(r > rstop) discard;-->
<!--    -->
<!--    vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);-->
<!--    float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));-->
<!--    col *= vec3(1.0, grady, grady);-->
<!--    col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));-->
<!--    col = col * diffuse + specular;-->
<!--    -->
<!--    col = mix(fadeCol, col, distancefade);-->
<!--    -->
<!--    float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;-->
<!--    alpha = smoothstep(0.0, 1.0, alpha) * palpha;-->
<!--    -->
<!--    gl_FragColor = vec4(col * 0.5, alpha);-->
<!--}-->
<!--</script>-->
<!--&lt;!&ndash; effects &ndash;&gt;-->
<!--<script id="fx_common_vsh" type="x-shader/x_vertex">-->
<!--uniform vec3 uResolution;-->
<!--attribute vec2 aPosition;-->

<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->

<!--void main(void) {-->
<!--    gl_Position = vec4(aPosition, 0.0, 1.0);-->
<!--    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);-->
<!--    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);-->
<!--}-->
<!--</script>-->
<!--<script id="bg_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->

<!--uniform vec2 uTimes;-->

<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->

<!--void main(void) {-->
<!--    vec3 col;-->
<!--    float c;-->
<!--    vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);-->
<!--    c = exp(-pow(length(tmpv) * 1.8, 2.0));-->
<!--    col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);-->
<!--    gl_FragColor = vec4(col * 0.5, 1.0);-->
<!--}-->
<!--</script>-->
<!--<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->
<!--uniform sampler2D uSrc;-->
<!--uniform vec2 uDelta;-->

<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->

<!--void main(void) {-->
<!--    vec4 col = texture2D(uSrc, texCoord);-->
<!--    gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);-->
<!--}-->
<!--</script>-->
<!--<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->
<!--uniform sampler2D uSrc;-->
<!--uniform vec2 uDelta;-->
<!--uniform vec4 uBlurDir; //dir(x, y), stride(z, w)-->

<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->

<!--void main(void) {-->
<!--    vec4 col = texture2D(uSrc, texCoord);-->
<!--    col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);-->
<!--    col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);-->
<!--    col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);-->
<!--    col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);-->
<!--    gl_FragColor = col / 5.0;-->
<!--}-->
<!--</script>-->
<!--&lt;!&ndash; effect fragment shader template &ndash;&gt;-->
<!--<script id="fx_common_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->
<!--uniform sampler2D uSrc;-->
<!--uniform vec2 uDelta;-->

<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->

<!--void main(void) {-->
<!--    gl_FragColor = texture2D(uSrc, texCoord);-->
<!--}-->
<!--</script>-->
<!--&lt;!&ndash; post processing &ndash;&gt;-->
<!--<script id="pp_final_vsh" type="x-shader/x_vertex">-->
<!--uniform vec3 uResolution;-->
<!--attribute vec2 aPosition;-->
<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->
<!--void main(void) {-->
<!--    gl_Position = vec4(aPosition, 0.0, 1.0);-->
<!--    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);-->
<!--    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);-->
<!--}-->
<!--</script>-->
<!--<script id="pp_final_fsh" type="x-shader/x_fragment">-->
<!--#ifdef GL_ES-->
<!--//precision mediump float;-->
<!--precision highp float;-->
<!--#endif-->
<!--uniform sampler2D uSrc;-->
<!--uniform sampler2D uBloom;-->
<!--uniform vec2 uDelta;-->
<!--varying vec2 texCoord;-->
<!--varying vec2 screenCoord;-->
<!--void main(void) {-->
<!--    vec4 srccol = texture2D(uSrc, texCoord) * 2.0;-->
<!--    vec4 bloomcol = texture2D(uBloom, texCoord);-->
<!--    vec4 col;-->
<!--    col = srccol + bloomcol * (vec4(1.0) + srccol);-->
<!--    col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);-->
<!--    col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)-->
<!--    -->
<!--    gl_FragColor = vec4(col.rgb, 1.0);-->
<!--    gl_FragColor.a = 1.0;-->
<!--}-->
<!--</script>-->
<!--  <script>-->
<!--  // Utilities-->
<!--var Vector3 = {};-->
<!--var Matrix44 = {};-->
<!--Vector3.create = function(x, y, z) {-->
<!--    return {'x':x, 'y':y, 'z':z};-->
<!--};-->
<!--Vector3.dot = function (v0, v1) {-->
<!--    return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;-->
<!--};-->
<!--Vector3.cross = function (v, v0, v1) {-->
<!--    v.x = v0.y * v1.z - v0.z * v1.y;-->
<!--    v.y = v0.z * v1.x - v0.x * v1.z;-->
<!--    v.z = v0.x * v1.y - v0.y * v1.x;-->
<!--};-->
<!--Vector3.normalize = function (v) {-->
<!--    var l = v.x * v.x + v.y * v.y + v.z * v.z;-->
<!--    if(l > 0.00001) {-->
<!--        l = 1.0 / Math.sqrt(l);-->
<!--        v.x *= l;-->
<!--        v.y *= l;-->
<!--        v.z *= l;-->
<!--    }-->
<!--};-->
<!--Vector3.arrayForm = function(v) {-->
<!--    if(v.array) {-->
<!--        v.array[0] = v.x;-->
<!--        v.array[1] = v.y;-->
<!--        v.array[2] = v.z;-->
<!--    }-->
<!--    else {-->
<!--        v.array = new Float32Array([v.x, v.y, v.z]);-->
<!--    }-->
<!--    return v.array;-->
<!--};-->
<!--Matrix44.createIdentity = function () {-->
<!--    return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);-->
<!--};-->
<!--Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {-->
<!--    var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;-->
<!--    var w = h * aspect;-->
<!--    -->
<!--    m[0] = 2.0 * near / w;-->
<!--    m[1] = 0.0;-->
<!--    m[2] = 0.0;-->
<!--    m[3] = 0.0;-->
<!--    -->
<!--    m[4] = 0.0;-->
<!--    m[5] = 2.0 * near / h;-->
<!--    m[6] = 0.0;-->
<!--    m[7] = 0.0;-->
<!--    -->
<!--    m[8] = 0.0;-->
<!--    m[9] = 0.0;-->
<!--    m[10] = -(far + near) / (far - near);-->
<!--    m[11] = -1.0;-->
<!--    -->
<!--    m[12] = 0.0;-->
<!--    m[13] = 0.0;-->
<!--    m[14] = -2.0 * far * near / (far - near);-->
<!--    m[15] = 0.0;-->
<!--};-->
<!--Matrix44.loadLookAt = function (m, vpos, vlook, vup) {-->
<!--    var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);-->
<!--    Vector3.normalize(frontv);-->
<!--    var sidev = Vector3.create(1.0, 0.0, 0.0);-->
<!--    Vector3.cross(sidev, vup, frontv);-->
<!--    Vector3.normalize(sidev);-->
<!--    var topv = Vector3.create(1.0, 0.0, 0.0);-->
<!--    Vector3.cross(topv, frontv, sidev);-->
<!--    Vector3.normalize(topv);-->
<!--    -->
<!--    m[0] = sidev.x;-->
<!--    m[1] = topv.x;-->
<!--    m[2] = frontv.x;-->
<!--    m[3] = 0.0;-->
<!--    -->
<!--    m[4] = sidev.y;-->
<!--    m[5] = topv.y;-->
<!--    m[6] = frontv.y;-->
<!--    m[7] = 0.0;-->
<!--    -->
<!--    m[8] = sidev.z;-->
<!--    m[9] = topv.z;-->
<!--    m[10] = frontv.z;-->
<!--    m[11] = 0.0;-->
<!--    -->
<!--    m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);-->
<!--    m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);-->
<!--    m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);-->
<!--    m[15] = 1.0;-->
<!--};-->

<!--//-->
<!--var timeInfo = {-->
<!--    'start':0, 'prev':0, // Date-->
<!--    'delta':0, 'elapsed':0 // Number(sec)-->
<!--};-->

<!--//-->
<!--var gl;-->
<!--var renderSpec = {-->
<!--    'width':0,-->
<!--    'height':0,-->
<!--    'aspect':1,-->
<!--    'array':new Float32Array(3),-->
<!--    'halfWidth':0,-->
<!--    'halfHeight':0,-->
<!--    'halfArray':new Float32Array(3)-->
<!--    // and some render targets. see setViewport()-->
<!--};-->
<!--renderSpec.setSize = function(w, h) {-->
<!--    renderSpec.width = w;-->
<!--    renderSpec.height = h;-->
<!--    renderSpec.aspect = renderSpec.width / renderSpec.height;-->
<!--    renderSpec.array[0] = renderSpec.width;-->
<!--    renderSpec.array[1] = renderSpec.height;-->
<!--    renderSpec.array[2] = renderSpec.aspect;-->
<!--    -->
<!--    renderSpec.halfWidth = Math.floor(w / 2);-->
<!--    renderSpec.halfHeight = Math.floor(h / 2);-->
<!--    renderSpec.halfArray[0] = renderSpec.halfWidth;-->
<!--    renderSpec.halfArray[1] = renderSpec.halfHeight;-->
<!--    renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;-->
<!--};-->

<!--function deleteRenderTarget(rt) {-->
<!--    gl.deleteFramebuffer(rt.frameBuffer);-->
<!--    gl.deleteRenderbuffer(rt.renderBuffer);-->
<!--    gl.deleteTexture(rt.texture);-->
<!--}-->

<!--function createRenderTarget(w, h) {-->
<!--    var ret = {-->
<!--        'width':w,-->
<!--        'height':h,-->
<!--        'sizeArray':new Float32Array([w, h, w / h]),-->
<!--        'dtxArray':new Float32Array([1.0 / w, 1.0 / h])-->
<!--    };-->
<!--    ret.frameBuffer = gl.createFramebuffer();-->
<!--    ret.renderBuffer = gl.createRenderbuffer();-->
<!--    ret.texture = gl.createTexture();-->
<!--    -->
<!--    gl.bindTexture(gl.TEXTURE_2D, ret.texture);-->
<!--    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);-->
<!--    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);-->
<!--    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);-->
<!--    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);-->
<!--    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);-->
<!--    -->
<!--    gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);-->
<!--    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);-->
<!--    -->
<!--    gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);-->
<!--    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);-->
<!--    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);-->
<!--    -->
<!--    gl.bindTexture(gl.TEXTURE_2D, null);-->
<!--    gl.bindRenderbuffer(gl.RENDERBUFFER, null);-->
<!--    gl.bindFramebuffer(gl.FRAMEBUFFER, null);-->
<!--    -->
<!--    return ret;-->
<!--}-->

<!--function compileShader(shtype, shsrc) {-->
<!--    var retsh = gl.createShader(shtype);-->
<!--    -->
<!--    gl.shaderSource(retsh, shsrc);-->
<!--    gl.compileShader(retsh);-->
<!--    -->
<!--    if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {-->
<!--        var errlog = gl.getShaderInfoLog(retsh);-->
<!--        gl.deleteShader(retsh);-->
<!--        console.error(errlog);-->
<!--        return null;-->
<!--    }-->
<!--    return retsh;-->
<!--}-->

<!--function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {-->
<!--    var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);-->
<!--    var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);-->
<!--    -->
<!--    if(vsh == null || fsh == null) {-->
<!--        return null;-->
<!--    }-->
<!--    -->
<!--    var prog = gl.createProgram();-->
<!--    gl.attachShader(prog, vsh);-->
<!--    gl.attachShader(prog, fsh);-->
<!--    -->
<!--    gl.deleteShader(vsh);-->
<!--    gl.deleteShader(fsh);-->
<!--    -->
<!--    gl.linkProgram(prog);-->
<!--    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {-->
<!--        var errlog = gl.getProgramInfoLog(prog);-->
<!--        console.error(errlog);-->
<!--        return null;-->
<!--    }-->
<!--    -->
<!--    if(uniformlist) {-->
<!--        prog.uniforms = {};-->
<!--        for(var i = 0; i < uniformlist.length; i++) {-->
<!--            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);-->
<!--        }-->
<!--    }-->
<!--    -->
<!--    if(attrlist) {-->
<!--        prog.attributes = {};-->
<!--        for(var i = 0; i < attrlist.length; i++) {-->
<!--            var attr = attrlist[i];-->
<!--            prog.attributes[attr] = gl.getAttribLocation(prog, attr);-->
<!--        }-->
<!--    }-->
<!--    -->
<!--    return prog;-->
<!--}-->

<!--function useShader(prog) {-->
<!--    gl.useProgram(prog);-->
<!--    for(var attr in prog.attributes) {-->
<!--        gl.enableVertexAttribArray(prog.attributes[attr]);;-->
<!--    }-->
<!--}-->

<!--function unuseShader(prog) {-->
<!--    for(var attr in prog.attributes) {-->
<!--        gl.disableVertexAttribArray(prog.attributes[attr]);;-->
<!--    }-->
<!--    gl.useProgram(null);-->
<!--}-->

<!--/////-->
<!--var projection = {-->
<!--    'angle':60,-->
<!--    'nearfar':new Float32Array([0.1, 100.0]),-->
<!--    'matrix':Matrix44.createIdentity()-->
<!--};-->
<!--var camera = {-->
<!--    'position':Vector3.create(0, 0, 100),-->
<!--    'lookat':Vector3.create(0, 0, 0),-->
<!--    'up':Vector3.create(0, 1, 0),-->
<!--    'dof':Vector3.create(10.0, 4.0, 8.0),-->
<!--    'matrix':Matrix44.createIdentity()-->
<!--};-->

<!--var pointFlower = {};-->
<!--var meshFlower = {};-->
<!--var sceneStandBy = false;-->

<!--var BlossomParticle = function () {-->
<!--    this.velocity = new Array(3);-->
<!--    this.rotation = new Array(3);-->
<!--    this.position = new Array(3);-->
<!--    this.euler = new Array(3);-->
<!--    this.size = 1.0;-->
<!--    this.alpha = 1.0;-->
<!--    this.zkey = 0.0;-->
<!--};-->

<!--BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {-->
<!--    this.velocity[0] = vx;-->
<!--    this.velocity[1] = vy;-->
<!--    this.velocity[2] = vz;-->
<!--};-->

<!--BlossomParticle.prototype.setRotation = function (rx, ry, rz) {-->
<!--    this.rotation[0] = rx;-->
<!--    this.rotation[1] = ry;-->
<!--    this.rotation[2] = rz;-->
<!--};-->

<!--BlossomParticle.prototype.setPosition = function (nx, ny, nz) {-->
<!--    this.position[0] = nx;-->
<!--    this.position[1] = ny;-->
<!--    this.position[2] = nz;-->
<!--};-->

<!--BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {-->
<!--    this.euler[0] = rx;-->
<!--    this.euler[1] = ry;-->
<!--    this.euler[2] = rz;-->
<!--};-->

<!--BlossomParticle.prototype.setSize = function (s) {-->
<!--    this.size = s;-->
<!--};-->

<!--BlossomParticle.prototype.update = function (dt, et) {-->
<!--    this.position[0] += this.velocity[0] * dt;-->
<!--    this.position[1] += this.velocity[1] * dt;-->
<!--    this.position[2] += this.velocity[2] * dt;-->
<!--    -->
<!--    this.euler[0] += this.rotation[0] * dt;-->
<!--    this.euler[1] += this.rotation[1] * dt;-->
<!--    this.euler[2] += this.rotation[2] * dt;-->
<!--};-->

<!--function createPointFlowers() {-->
<!--    // get point sizes-->
<!--    var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);-->
<!--    renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};-->
<!--    -->
<!--    var vtxsrc = document.getElementById("sakura_point_vsh").textContent;-->
<!--    var frgsrc = document.getElementById("sakura_point_fsh").textContent;-->
<!--    -->
<!--    pointFlower.program = createShader(-->
<!--        vtxsrc, frgsrc,-->
<!--        ['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],-->
<!--        ['aPosition', 'aEuler', 'aMisc']-->
<!--    );-->
<!--    -->
<!--    useShader(pointFlower.program);-->
<!--    pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);-->
<!--    pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);-->
<!--    -->
<!--    // paramerters: velocity[3], rotate[3]-->
<!--    pointFlower.numFlowers = 1600;-->
<!--    pointFlower.particles = new Array(pointFlower.numFlowers);-->
<!--    // vertex attributes {position[3], euler_xyz[3], size[1]}-->
<!--    pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));-->
<!--    pointFlower.positionArrayOffset = 0;-->
<!--    pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;-->
<!--    pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;-->
<!--    -->
<!--    pointFlower.buffer = gl.createBuffer();-->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);-->
<!--    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);-->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, null);-->
<!--    -->
<!--    unuseShader(pointFlower.program);-->
<!--    -->
<!--    for(var i = 0; i < pointFlower.numFlowers; i++) {-->
<!--        pointFlower.particles[i] = new BlossomParticle();-->
<!--    }-->
<!--}-->

<!--function initPointFlowers() {-->
<!--    //area-->
<!--    pointFlower.area = Vector3.create(20.0, 20.0, 20.0);-->
<!--    pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;-->
<!--    -->
<!--    pointFlower.fader.x = 10.0; //env fade start-->
<!--    pointFlower.fader.y = pointFlower.area.z; //env fade half-->
<!--    pointFlower.fader.z = 0.1;  //near fade start-->
<!--    -->
<!--    //particles-->
<!--    var PI2 = Math.PI * 2.0;-->
<!--    var tmpv3 = Vector3.create(0, 0, 0);-->
<!--    var tmpv = 0;-->
<!--    var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};-->
<!--    for(var i = 0; i < pointFlower.numFlowers; i++) {-->
<!--        var tmpprtcl = pointFlower.particles[i];-->
<!--        -->
<!--        //velocity-->
<!--        tmpv3.x = symmetryrand() * 0.3 + 0.8;-->
<!--        tmpv3.y = symmetryrand() * 0.2 - 1.0;-->
<!--        tmpv3.z = symmetryrand() * 0.3 + 0.5;-->
<!--        Vector3.normalize(tmpv3);-->
<!--        tmpv = 2.0 + Math.random() * 1.0;-->
<!--        tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);-->
<!--        -->
<!--        //rotation-->
<!--        tmpprtcl.setRotation(-->
<!--            symmetryrand() * PI2 * 0.5,-->
<!--            symmetryrand() * PI2 * 0.5,-->
<!--            symmetryrand() * PI2 * 0.5-->
<!--        );-->
<!--        -->
<!--        //position-->
<!--        tmpprtcl.setPosition(-->
<!--            symmetryrand() * pointFlower.area.x,-->
<!--            symmetryrand() * pointFlower.area.y,-->
<!--            symmetryrand() * pointFlower.area.z-->
<!--        );-->
<!--        -->
<!--        //euler-->
<!--        tmpprtcl.setEulerAngles(-->
<!--            Math.random() * Math.PI * 2.0,-->
<!--            Math.random() * Math.PI * 2.0,-->
<!--            Math.random() * Math.PI * 2.0-->
<!--        );-->
<!--        -->
<!--        //size-->
<!--        tmpprtcl.setSize(0.9 + Math.random() * 0.1);-->
<!--    }-->
<!--}-->

<!--function renderPointFlowers() {-->
<!--    //update-->
<!--    var PI2 = Math.PI * 2.0;-->
<!--    var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];-->
<!--    var repeatPos = function (prt, cmp, limit) {-->
<!--        if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {-->
<!--            //out of area-->
<!--            if(prt.position[cmp] > 0) {-->
<!--                prt.position[cmp] -= limit * 2.0;-->
<!--            }-->
<!--            else {-->
<!--                prt.position[cmp] += limit * 2.0;-->
<!--            }-->
<!--        }-->
<!--    };-->
<!--    var repeatEuler = function (prt, cmp) {-->
<!--        prt.euler[cmp] = prt.euler[cmp] % PI2;-->
<!--        if(prt.euler[cmp] < 0.0) {-->
<!--            prt.euler[cmp] += PI2;-->
<!--        }-->
<!--    };-->
<!--    -->
<!--    for(var i = 0; i < pointFlower.numFlowers; i++) {-->
<!--        var prtcl = pointFlower.particles[i];-->
<!--        prtcl.update(timeInfo.delta, timeInfo.elapsed);-->
<!--        repeatPos(prtcl, 0, pointFlower.area.x);-->
<!--        repeatPos(prtcl, 1, pointFlower.area.y);-->
<!--        repeatPos(prtcl, 2, pointFlower.area.z);-->
<!--        repeatEuler(prtcl, 0);-->
<!--        repeatEuler(prtcl, 1);-->
<!--        repeatEuler(prtcl, 2);-->
<!--        -->
<!--        prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;-->
<!--        -->
<!--        prtcl.zkey = (camera.matrix[2] * prtcl.position[0]-->
<!--                    + camera.matrix[6] * prtcl.position[1]-->
<!--                    + camera.matrix[10] * prtcl.position[2]-->
<!--                    + camera.matrix[14]);-->
<!--    }-->
<!--    -->
<!--    // sort-->
<!--    pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});-->
<!--    -->
<!--    // update data-->
<!--    var ipos = pointFlower.positionArrayOffset;-->
<!--    var ieuler = pointFlower.eulerArrayOffset;-->
<!--    var imisc = pointFlower.miscArrayOffset;-->
<!--    for(var i = 0; i < pointFlower.numFlowers; i++) {-->
<!--        var prtcl = pointFlower.particles[i];-->
<!--        pointFlower.dataArray[ipos] = prtcl.position[0];-->
<!--        pointFlower.dataArray[ipos + 1] = prtcl.position[1];-->
<!--        pointFlower.dataArray[ipos + 2] = prtcl.position[2];-->
<!--        ipos += 3;-->
<!--        pointFlower.dataArray[ieuler] = prtcl.euler[0];-->
<!--        pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];-->
<!--        pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];-->
<!--        ieuler += 3;-->
<!--        pointFlower.dataArray[imisc] = prtcl.size;-->
<!--        pointFlower.dataArray[imisc + 1] = prtcl.alpha;-->
<!--        imisc += 2;-->
<!--    }-->
<!--    -->
<!--    //draw-->
<!--    gl.enable(gl.BLEND);-->
<!--    //gl.disable(gl.DEPTH_TEST);-->
<!--    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);-->
<!--    -->
<!--    var prog = pointFlower.program;-->
<!--    useShader(prog);-->
<!--    -->
<!--    gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);-->
<!--    gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);-->
<!--    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);-->
<!--    gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));-->
<!--    gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));-->
<!--    -->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);-->
<!--    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);-->
<!--    -->
<!--    gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);-->
<!--    gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);-->
<!--    gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);-->
<!--    -->
<!--    // doubler-->
<!--    for(var i = 1; i < 2; i++) {-->
<!--        var zpos = i * -2.0;-->
<!--        pointFlower.offset[0] = pointFlower.area.x * -1.0;-->
<!--        pointFlower.offset[1] = pointFlower.area.y * -1.0;-->
<!--        pointFlower.offset[2] = pointFlower.area.z * zpos;-->
<!--        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);-->
<!--        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);-->
<!--        -->
<!--        pointFlower.offset[0] = pointFlower.area.x * -1.0;-->
<!--        pointFlower.offset[1] = pointFlower.area.y *  1.0;-->
<!--        pointFlower.offset[2] = pointFlower.area.z * zpos;-->
<!--        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);-->
<!--        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);-->
<!--        -->
<!--        pointFlower.offset[0] = pointFlower.area.x *  1.0;-->
<!--        pointFlower.offset[1] = pointFlower.area.y * -1.0;-->
<!--        pointFlower.offset[2] = pointFlower.area.z * zpos;-->
<!--        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);-->
<!--        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);-->
<!--        -->
<!--        pointFlower.offset[0] = pointFlower.area.x *  1.0;-->
<!--        pointFlower.offset[1] = pointFlower.area.y *  1.0;-->
<!--        pointFlower.offset[2] = pointFlower.area.z * zpos;-->
<!--        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);-->
<!--        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);-->
<!--    }-->
<!--    -->
<!--    //main-->
<!--    pointFlower.offset[0] = 0.0;-->
<!--    pointFlower.offset[1] = 0.0;-->
<!--    pointFlower.offset[2] = 0.0;-->
<!--    gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);-->
<!--    gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);-->
<!--    -->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, null);-->
<!--    unuseShader(prog);-->
<!--    -->
<!--    gl.enable(gl.DEPTH_TEST);-->
<!--    gl.disable(gl.BLEND);-->
<!--}-->

<!--// effects-->
<!--//common util-->
<!--function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {-->
<!--    var ret = {};-->
<!--    var unifs = ['uResolution', 'uSrc', 'uDelta'];-->
<!--    if(exunifs) {-->
<!--        unifs = unifs.concat(exunifs);-->
<!--    }-->
<!--    var attrs = ['aPosition'];-->
<!--    if(exattrs) {-->
<!--        attrs = attrs.concat(exattrs);-->
<!--    }-->
<!--    -->
<!--    ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);-->
<!--    useShader(ret.program);-->
<!--    -->
<!--    ret.dataArray = new Float32Array([-->
<!--        -1.0, -1.0,-->
<!--         1.0, -1.0,-->
<!--        -1.0,  1.0,-->
<!--         1.0,  1.0-->
<!--    ]);-->
<!--    ret.buffer = gl.createBuffer();-->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);-->
<!--    gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);-->
<!--    -->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, null);-->
<!--    unuseShader(ret.program);-->
<!--    -->
<!--    return ret;-->
<!--}-->

<!--// basic usage-->
<!--// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize-->
<!--// gl.uniform**(...); //additional uniforms-->
<!--// drawEffect()-->
<!--// unuseEffect(prog)-->
<!--// TEXTURE0 makes src-->
<!--function useEffect(fxobj, srctex) {-->
<!--    var prog = fxobj.program;-->
<!--    useShader(prog);-->
<!--    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);-->
<!--    -->
<!--    if(srctex != null) {-->
<!--        gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);-->
<!--        gl.uniform1i(prog.uniforms.uSrc, 0);-->
<!--        -->
<!--        gl.activeTexture(gl.TEXTURE0);-->
<!--        gl.bindTexture(gl.TEXTURE_2D, srctex.texture);-->
<!--    }-->
<!--}-->
<!--function drawEffect(fxobj) {-->
<!--    gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);-->
<!--    gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);-->
<!--    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);-->
<!--}-->
<!--function unuseEffect(fxobj) {-->
<!--    unuseShader(fxobj.program);-->
<!--}-->

<!--var effectLib = {};-->
<!--function createEffectLib() {-->
<!--    -->
<!--    var vtxsrc, frgsrc;-->
<!--    //common-->
<!--    var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;-->
<!--    -->
<!--    //background-->
<!--    frgsrc = document.getElementById("bg_fsh").textContent;-->
<!--    effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);-->
<!--    -->
<!--    // make brightpixels buffer-->
<!--    frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;-->
<!--    effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);-->
<!--    -->
<!--    // direction blur-->
<!--    frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;-->
<!--    effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);-->
<!--    -->
<!--    //final composite-->
<!--    vtxsrc = document.getElementById("pp_final_vsh").textContent;-->
<!--    frgsrc = document.getElementById("pp_final_fsh").textContent;-->
<!--    effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);-->
<!--}-->

<!--// background-->
<!--function createBackground() {-->
<!--    //console.log("create background");-->
<!--}-->
<!--function initBackground() {-->
<!--    //console.log("init background");-->
<!--}-->
<!--function renderBackground() {-->
<!--    gl.disable(gl.DEPTH_TEST);-->
<!--    -->
<!--    useEffect(effectLib.sceneBg, null);-->
<!--    gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);-->
<!--    drawEffect(effectLib.sceneBg);-->
<!--    unuseEffect(effectLib.sceneBg);-->
<!--    -->
<!--    gl.enable(gl.DEPTH_TEST);-->
<!--}-->

<!--// post process-->
<!--var postProcess = {};-->
<!--function createPostProcess() {-->
<!--    //console.log("create post process");-->
<!--}-->
<!--function initPostProcess() {-->
<!--    //console.log("init post process");-->
<!--}-->

<!--function renderPostProcess() {-->
<!--    gl.enable(gl.TEXTURE_2D);-->
<!--    gl.disable(gl.DEPTH_TEST);-->
<!--    var bindRT = function (rt, isclear) {-->
<!--        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);-->
<!--        gl.viewport(0, 0, rt.width, rt.height);-->
<!--        if(isclear) {-->
<!--            gl.clearColor(0, 0, 0, 0);-->
<!--            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);-->
<!--        }-->
<!--    };-->
<!--    -->
<!--    //make bright buff-->
<!--    bindRT(renderSpec.wHalfRT0, true);-->
<!--    useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);-->
<!--    drawEffect(effectLib.mkBrightBuf);-->
<!--    unuseEffect(effectLib.mkBrightBuf);-->
<!--    -->
<!--    // make bloom-->
<!--    for(var i = 0; i < 2; i++) {-->
<!--        var p = 1.5 + 1 * i;-->
<!--        var s = 2.0 + 1 * i;-->
<!--        bindRT(renderSpec.wHalfRT1, true);-->
<!--        useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);-->
<!--        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);-->
<!--        drawEffect(effectLib.dirBlur);-->
<!--        unuseEffect(effectLib.dirBlur);-->
<!--        -->
<!--        bindRT(renderSpec.wHalfRT0, true);-->
<!--        useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);-->
<!--        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);-->
<!--        drawEffect(effectLib.dirBlur);-->
<!--        unuseEffect(effectLib.dirBlur);-->
<!--    }-->
<!--    -->
<!--    //display-->
<!--    gl.bindFramebuffer(gl.FRAMEBUFFER, null);-->
<!--    gl.viewport(0, 0, renderSpec.width, renderSpec.height);-->
<!--    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);-->
<!--    -->
<!--    useEffect(effectLib.finalComp, renderSpec.mainRT);-->
<!--    gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);-->
<!--    gl.activeTexture(gl.TEXTURE1);-->
<!--    gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);-->
<!--    drawEffect(effectLib.finalComp);-->
<!--    unuseEffect(effectLib.finalComp);-->
<!--    -->
<!--    gl.enable(gl.DEPTH_TEST);-->
<!--}-->

<!--/////-->
<!--var SceneEnv = {};-->
<!--function createScene() {-->
<!--    createEffectLib();-->
<!--    createBackground();-->
<!--    createPointFlowers();-->
<!--    createPostProcess();-->
<!--    sceneStandBy = true;-->
<!--}-->

<!--function initScene() {-->
<!--    initBackground();-->
<!--    initPointFlowers();-->
<!--    initPostProcess();-->
<!--    -->
<!--    //camera.position.z = 17.320508;-->
<!--    camera.position.z = pointFlower.area.z + projection.nearfar[0];-->
<!--    projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;-->
<!--    Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);-->
<!--}-->

<!--function renderScene() {-->
<!--    //draw-->
<!--    Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);-->
<!--    -->
<!--    gl.enable(gl.DEPTH_TEST);-->
<!--    -->
<!--    //gl.bindFramebuffer(gl.FRAMEBUFFER, null);-->
<!--    gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);-->
<!--    gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);-->
<!--    gl.clearColor(0.005, 0, 0.05, 0);-->
<!--    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);-->
<!--    -->
<!--    renderBackground();-->
<!--    renderPointFlowers();-->
<!--    renderPostProcess();-->
<!--}-->

<!--/////-->
<!--function onResize(e) {-->
<!--    makeCanvasFullScreen(document.getElementById("sakura"));-->
<!--    setViewports();-->
<!--    if(sceneStandBy) {-->
<!--        initScene();-->
<!--    }-->
<!--}-->

<!--function setViewports() {-->
<!--    renderSpec.setSize(gl.canvas.width, gl.canvas.height);-->
<!--    -->
<!--    gl.clearColor(0.2, 0.2, 0.5, 1.0);-->
<!--    gl.viewport(0, 0, renderSpec.width, renderSpec.height);-->
<!--    -->
<!--    var rtfunc = function (rtname, rtw, rth) {-->
<!--        var rt = renderSpec[rtname];-->
<!--        if(rt) deleteRenderTarget(rt);-->
<!--        renderSpec[rtname] = createRenderTarget(rtw, rth);-->
<!--    };-->
<!--    rtfunc('mainRT', renderSpec.width, renderSpec.height);-->
<!--    rtfunc('wFullRT0', renderSpec.width, renderSpec.height);-->
<!--    rtfunc('wFullRT1', renderSpec.width, renderSpec.height);-->
<!--    rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);-->
<!--    rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);-->
<!--}-->

<!--function render() {-->
<!--    renderScene();-->
<!--}-->

<!--var animating = true;-->
<!--function toggleAnimation(elm) {-->
<!--    animating ^= true;-->
<!--    if(animating) animate();-->
<!--    if(elm) {-->
<!--        elm.innerHTML = animating? "Stop":"Start";-->
<!--    }-->
<!--}-->

<!--function stepAnimation() {-->
<!--    if(!animating) animate();-->
<!--}-->

<!--function animate() {-->
<!--    var curdate = new Date();-->
<!--    timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;-->
<!--    timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;-->
<!--    timeInfo.prev = curdate;-->
<!--    -->
<!--    if(animating) requestAnimationFrame(animate);-->
<!--    render();-->
<!--}-->

<!--function makeCanvasFullScreen(canvas) {-->
<!--    var b = document.body;-->
<!--    var d = document.documentElement;-->
<!--    fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);-->
<!--    fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);-->
<!--    canvas.width = fullw;-->
<!--    canvas.height = fullh;-->
<!--}-->

<!--window.addEventListener('load', function(e) {-->
<!--    var canvas = document.getElementById("sakura");-->
<!--    try {-->
<!--        makeCanvasFullScreen(canvas);-->
<!--        gl = canvas.getContext('experimental-webgl');-->
<!--    } catch(e) {-->
<!--        alert("WebGL not supported." + e);-->
<!--        console.error(e);-->
<!--        return;-->
<!--    }-->
<!--    -->
<!--    window.addEventListener('resize', onResize);-->
<!--    -->
<!--    setViewports();-->
<!--    createScene();-->
<!--    initScene();-->
<!--    -->
<!--    timeInfo.start = new Date();-->
<!--    timeInfo.prev = timeInfo.start;-->
<!--    animate();-->
<!--});-->

<!--//set window.requestAnimationFrame-->
<!--(function (w, r) {-->
<!--    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };-->
<!--})(window, 'equestAnimationFrame');-->
<!--  </script>-->
 </BODY>
</HTML>
 